<template>
    <div>
     <button @click="fn">点击</button>
      <span v-isshow="false">1111111</span>
      <!-- vue为我们提供ltransition 这个组件（标签），且自带了几个类型，让我们实现一些简单得过度效果 -->
      <!-- transition其实就是提供了简单得关键帧 -->
      <!-- apper就是让动画默认执行一次 -->
       <transition  name="bounce" :appear="true">
            <div v-show="flag" class="box"></div>
        </transition>   
          <!-- <transition :appear="true">
            <div v-show="flag" class="box"></div>
        </transition>    -->
      <!-- <img :src="imgurl" alt=""> -->
       <!-- <img  v-defaultImg="imgurl" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F0G020114924%2F200G0114924-15-1200.jpg&g=0n&fmt=auto?sec=1659078188&t=113d2fce42773afd4dc8ddab4ec922b3" alt=""> -->
    </div>
</template>

<script>
// 自定义指令，除了vue本身为咱们提供得指令，我们还可以自己实现一些指令
// 封装一个图片如果成功展示图片，如果没有成功，展示默认图片
export default {
   data(){
     return {
       flag:true,
       imgurl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20200331%2F4ec38d78be8946cd8b4a2cccee6208ca.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659078902&t=2cebbfc8eff31a874f6f40137f12bef0"
     }
   },
    methods:{
        fn(){
          this.flag = !this.flag
        }
    },
    directives:{ // 这个对象就用于放自定义指令
       isshow:{
          inserted(el,binding){  // iseerted:function(){},el是绑定自定义指令得dom节点
              console.log(el,binding.value);
               if (binding.value == true) {
                    el.style.display = "block"
               } 
               if (binding.value == false) {
                    el.style.display = "none"
               }  
          },
       },
       defaultImg:{
          inserted(el,binding){
              console.log(el);
              el.onerror = function(){
                el.src = binding.value
              }
          }
       }
    }
}
</script>

<style>
  .box {
    width: 200px;
    height: 200px;
    background: red;
  }
  /* 动画最开始前得状态，相当于@keyfroms的百分之0,刚进入得时候 */
  .bounce-enter {  
      transform: translateX(-100%);
      background: red;
  }
  /* 进入已经完成了 */
  .bounce-enter-to {
       transform: translateX(0);
       background: yellow;
  }
  /* 整个过程 */
  .bounce-enter-active,.bounce-leave-active {
       transition:  all 1s;
  }
  .bounce-leave {
      transform: translateX(0);
  }
  .bounce-leave-to {
     transform: translateX(-100%);
  }
 

</style>